<!--登录-->
<template>
  <div class="container">
    <div
      id="canvascontainer"
      ref="can"
    ></div>
    <div class="login-header">
      枣庄市公安局{{ title }}
    </div>
    <div class="login-body">
      <div class="logo">
        <p class="logo-line1 thick">
        </p>
        <p class="logo-line2 thin">
          <!--          让每位参与者获得幸福和乐趣!-->
          {{ subTitle }}
        </p>
      </div>
      <div class="form-view">
        <el-form
          ref="form"
          :model="formView"
        >
          <p class="login-text">
            欢迎登录
          </p>
          <p class="login-text-small">
            {{ title }}
          </p>
          <el-form-item
            prop="userName"
          >
            <el-input
              style="width: 250px"
              size="small"
              placeholder="请输入用户名/手机号"
              @keyup.enter="loginSubmit"
              v-model.trim="formView.userName"
            ></el-input>
          </el-form-item>
          <el-form-item
            prop="passWord"
          >
            <el-input
              style="width: 250px"
              type="passWord"
              size="small"
              placeholder="请输入密码"
              @blur="checkPass"
              @keyup.enter="loginSubmit"
              v-model.trim="formView.passWord"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 250px;margin-top: 20px"
              size="small"
              type="primary"
              @click="loginSubmit"
            >
              <span style="font-weight: 300;">立即登录</span>
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="copyright">
      <!--      2019©优鲜供应链有限公司-->
    </div>
  </div>
</template>

<script>
  let aid
  export default {
    name: 'Login',
    data () {
      return {
        title: TITLE,
        subTitle: SUB_TITLE,
        formView: {
          userName: '',
          passWord: ''
        },
        ruleValidate: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          passWord: [
            { required: true, message: '密码不能为空', trigger: 'blur' }
          ]
        }
      }
    },
    mounted () {
      container = document.createElement('div')
      this.$refs.can.appendChild(container)

      camera = new THREE.PerspectiveCamera(120, window.innerWidth / window.innerHeight, 1, 10000)
      camera.position.z = 1000

      scene = new THREE.Scene()

      particles = []

      var PI2 = Math.PI * 2
      var material = new THREE.ParticleCanvasMaterial({

        color: 0xe1e1e1,
        program: function (context) {
          context.beginPath()
          context.arc(0, 0, 0.6, 0, PI2, true)
          context.fill()
        }

      })

      var i = 0

      for (var ix = 0; ix < AMOUNTX; ix++) {
        for (var iy = 0; iy < AMOUNTY; iy++) {
          particle = particles[i++] = new THREE.Particle(material)
          particle.position.x = ix * SEPARATION - ((AMOUNTX * SEPARATION) / 2)
          particle.position.z = iy * SEPARATION - ((AMOUNTY * SEPARATION) / 2)
          scene.add(particle)
        }
      }

      renderer = new THREE.CanvasRenderer()
      renderer.setSize(window.innerWidth, window.innerHeight)
      container.appendChild(renderer.domElement)

      document.addEventListener('mousemove', onDocumentMouseMove, false)
      document.addEventListener('touchstart', onDocumentTouchStart, false)
      document.addEventListener('touchmove', onDocumentTouchMove, false)

      window.addEventListener('resize', onWindowResize, false)
      animate()
    },
    created () {
      if (sessionStorage.getItem('user_info')) {
        this.$router.push('/')
      }
    },
    destroyed () {
    },
    methods: {
      checkPass (event) {
        const regu = /^[\w]{6,28}$/
        if (!event.target.value.match(regu)) {
          this.formView.passWord = ''
          this.$message.error('密码至少输入6位！')
        }
      },
      async loginSubmit () {
        const { userName: phone, passWord: password } = this.formView
        if (!phone) {
          this.$message.error('请输入用户名')
          return
        }
        if (!password) {
          this.$message.error('请输入用户密码')
          return
        }
        const { data } = await this.$service.gzl.login({ phone, password })
        window.cancelAnimationFrame(aid)
        sessionStorage.setItem('user_info', JSON.stringify(data.data))
        const { err: errNode, data: dataNode } = await this.$service.gzl.getUserNodes()
        if (errNode) {
          sessionStorage.clear()
          return
        }
        console.log(dataNode)
        sessionStorage.setItem('nodes', JSON.stringify(dataNode.data))
        this.$router.push('/')
      }
    }
  }
  var SEPARATION = 100

  var AMOUNTX = 100

  var AMOUNTY = 70

  var container
  var camera, scene, renderer

  var particles
  var particle
  var count = 0

  var mouseX = 85

  var mouseY = -342

  var windowHalfX = window.innerWidth / 2
  var windowHalfY = window.innerHeight / 2

  function onWindowResize () {
    windowHalfX = window.innerWidth / 2
    windowHalfY = window.innerHeight / 2

    camera.aspect = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix()

    renderer.setSize(window.innerWidth, window.innerHeight)
  }

  //

  function onDocumentMouseMove (event) {
    mouseX = event.clientX - windowHalfX
    mouseY = event.clientY - windowHalfY
  }

  function onDocumentTouchStart (event) {
    if (event.touches.length === 1) {
      event.preventDefault()

      mouseX = event.touches[0].pageX - windowHalfX
      mouseY = event.touches[0].pageY - windowHalfY
    }
  }

  function onDocumentTouchMove (event) {
    if (event.touches.length === 1) {
      event.preventDefault()

      mouseX = event.touches[0].pageX - windowHalfX
      mouseY = event.touches[0].pageY - windowHalfY
    }
  }

  //

  function animate () {
    aid = requestAnimationFrame(animate)
    render()
  }

  function render () {
    camera.position.x += (mouseX - camera.position.x) * 0.05
    camera.position.y += (-mouseY - camera.position.y) * 0.05
    camera.lookAt(scene.position)

    var i = 0

    for (var ix = 0; ix < AMOUNTX; ix++) {
      for (var iy = 0; iy < AMOUNTY; iy++) {
        particle = particles[i++]
        particle.position.y = (Math.sin((ix + count) * 0.3) * 50) + (Math.sin((iy + count) * 0.5) * 50)
        particle.scale.x = particle.scale.y = (Math.sin((ix + count) * 0.3) + 1) * 2 + (Math.sin((iy + count) * 0.5) + 1) * 2
      }
    }

    renderer.render(scene, camera)

    count += 0.1
  }
</script>
<style scoped>
  #canvascontainer {
    position: absolute;
    top: 0;
  }

  #canvascontainer {
    background-color: #193c6d;
    filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#003073', endColorstr='#029797');
    background-image: url(//img.alicdn.com/tps/TB1d.u8MXXXXXXuXFXXXXXXXXXX-1900-790.jpg);
    background-size: 100%;
    background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, #212121), color-stop(100%, #555555));
    background-image: -webkit-linear-gradient(135deg, #212121, #555555);
    background-image: -moz-linear-gradient(45deg, #212121, #555555);
    background-image: -ms-linear-gradient(45deg, #212121 0, #555555 100%);
    background-image: -o-linear-gradient(45deg, #212121, #555555);
    background-image: linear-gradient(135deg, #212121, #555555);
    text-align: center;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
  }

  a {
    color: #0078ff;
  }

  .container {
    height: 100vh;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
  }

  .login-header {
    position: relative;
    /*position: absolute;*/
    /*top: 0;*/
    /*left: 0;*/
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-size: 18px;
    color: #FFF;
    /*background-color: #FFF;*/
    padding: 0 0 0 150px;
    border-bottom: 1px solid #848484;
    z-index: 1000;
  }

  .login-header:before {
    content: '';
    display: block;
    position: absolute;
    left: 85px;
    width: 60px;
    height: 50px;
    top: 15px;
    background: url() 0 0 no-repeat;
    background-size: 55px 50px;
  }

  .login-body {
    flex: 1;
    position: relative;
  }

  .form-view {
    width: 300px;
    height: 310px;
    padding: 30px 20px;
    background: #FFF;
    position: absolute;
    top: 50%;
    left: 70%;
    transform: translate(-50%, -50%);
  }

  .login-text {
    font-size: 20px;
    color: #2153D4;
    letter-spacing: 2px;
    font-weight: normal;
  }

  .login-text-small {
    color: #879BBA;
    font-size: 12px;
    margin-top: 5px;
    margin-bottom: 30px;
  }

  .copyright {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    color: #989898;
    font-size: 12px;
    text-align: center;
    line-height: 40px;
    z-index: 1000;
  }

  .logo {
    position: absolute;
    left: 10%;
    top: 30%;
  }

  .logo-line1 {
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 1px;
  }

  .logo-line2 {
    margin-top: 20px;
    font-size: 16px;
    color: #FFFFFF;
    letter-spacing: 1px;
  }

  .el-form-item {
    margin-bottom: 10px;
  }

  p {
    font-size: 50px;
    font-family: -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell",
    "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  }

  p.thin {
    font-weight: 100;
  }

  p.normal {
    font-weight: normal;
  }

  p.thick {
    font-weight: bold;
  }
</style>
